<template>
  <div class="component">
    <div @click="selectFileFunc" style="width: 300px; height: 300px; background: #f00;">
      文件上传
    </div>
  </div>
</template>

<script>
  import { VueExtend, Util } from 'godspen-lib'

  export default {
    mixins: [VueExtend.mixin],
    name: 'qiniu-upload',
    label: process.env.LABEL,
    style: process.env.STYLE,
    stack: false, // 是否是堆叠模式 ，true：孩子元素会按楼层一个个向下排布， false: 孩子元素绝对定位，随意放置位置
    childLimit: 9999,  // 孩子元素最大限制数
    leaf: false, // 是否是叶子节点，为true的时候该节点下面不能添加节点
    props: {
    },
    beforeCreate: async function () {
      // 加载七牛上传脚本
      await Util.loadJs('https://unpkg.com/qiniu-js@2.5.5/dist/qiniu.min.js')
    },
    computed: {
    },
    editorMethods: {
    },
    methods: {
      selectFileFunc: function (field, accept = 'image/*') {
        console.log('文件上传')
        let that = this
        // 创建一个虚拟的图片选择元素
        let fileInput = document.createElement('input')
        fileInput.setAttribute('type', 'file')
        fileInput.setAttribute('accept', accept)
        fileInput.click()
        fileInput.addEventListener('change', function (data) {
          // let file = data.target.files[0]
          that.$confirm('上传确认', function () {
            console.log('点击了确认')
          })
        })
      },
      uploadFileFunc: function () {

      }
    }
  }
</script>

<style lang="stylus" rel="stylesheet/stylus" type="text/stylus" scoped>
  .component {
    width: 100%;
    height: 100%;
  }
</style>
